<template>
    <svg aria-hidden="true">
        <use :xlink:href="symbolId" :class="fillClass" :fill="color" />
    </svg>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
    //显示的svg
    name: {
        type: String,
        required: true
    },
    //svg 图标的颜色
    color: {
        type: String
    },
    //tailwind 指定svg 颜色的类名
    fillClass: {
        type: String
    }
})

//使用计算属性 显示真实的 svg 图标（拼接 #icon-）
const symbolId = computed(() => {
    return `#icon-${props.name}`
})
</script>
<style lang="scss" scope></style>
